<template>
	<div class="el-input el-input--medium el-input--suffix pointer el-input--hold" :class="[
		disabled ? 'is-disabled': '',
		selected ?  'selected':'',
		multiRow ? 'multi-row' : '',
	]">
		<div class="el-input__inner" :class="[ visible  ? 'visible' : '']" :style="{'min-height':columnHeight-1+'px',}" style="z-index:1;max-height:140px">
			<div class="content">
				<slot></slot>
			</div>
		</div>
		<i class="el-icon-arrow-up icon" :class="visible ? 'is-reverse': ''"></i>
		<i v-if="!disabled" class="el-icon-circle-close icon" @click.stop="clear"></i>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  components: {}
})
export default class App extends Vue {
  @Prop({ default: false }) public disabled!: boolean;
  @Prop({ default: false }) public visible!: boolean;
  @Prop({ default: 33 }) public columnHeight!: number; // 行高
  @Prop({ default: false }) public selected!: boolean; // 已有值
  @Prop({ default: false }) public multiRow!: boolean; // 多行展示
  // eslint-disable-next-line no-void
  @Prop({ default: () => void 0 }) public clear!: any;
}
</script>

<style lang="stylus" scoped>
.el-input {
	width 100%
	position relative
	&.is-disabled {
		.icon {
			display none
		}
	}
	&.multi-row {
		min-height 36px
		.el-input__inner {
			height auto
			min-height 36px
		}
	}
	.el-input__inner {
		height auto
		position relative
		overflow auto
		&::-webkit-scrollbar {
			display none /* Chrome Safari */
		}
	}
	.content {
		overflow auto
		white-space nowrap
		flex-wrap wrap
	}
	.visible {
		border 1px solid #1a8cff
	}
	.icon {
		position absolute
		top 50%
		color #8c8c8c
		font-size 14px
		margin-top -7px
		right 10px
		z-index 1
	}
	.el-icon-arrow-up {
		transform rotateZ(180deg)
		&.is-reverse {
			transform rotateZ(0)
		}
	}
	.el-icon-circle-close {
		display none
	}
}
.selected:hover {
	.el-icon-arrow-up {
		display none
	}
	.el-icon-circle-close {
		display block
	}
}
.content {
	display flex
	align-items center
	white-space nowrap
	&::-webkit-scrollbar {
		display none /* Chrome Safari */
	}
	/deep/.tag {
		margin 3px 10px 3px 0
		flex-grow 0
		flex-shrink 0
		max-width 110px
		display flex
		align-items center
	}
	/deep/.el-icon-close {
		top 0
		flex-shrink 0
	}
}
</style>
